// 视图(页面布局组件)
import HomeView from '../views/HomeView.vue'
import ListView from '@/views/ListView.vue'
import CarView from '@/views/CarView.vue'
import MineView from '@/views/MineView.vue'
import DetailView from '@/views/DetailView.vue'
import DetailParamsView from "@/views/DetailParamsView.vue"

import LoginView from "@/views/Login/index.vue"
import UserLoginView from '@/views/Login/views/UserLogin.vue'
import PhoneLoginView from '@/views/Login/views/PhoneLogin.vue'

import NotFoundView from '@/views/NotFoundView.vue'


import HeaderView from '@/layout/HeaderView.vue'
import FooterView from '@/layout/FooterView.vue'

/* 
  项目重写: (老项目已经上线,并且和其他网站相互做了友情链接)
  路由配置中,旧项目的主页地址   http://127.0.0.1:5173/#/
            新项目的主页地址   http://127.0.0.1:5173/#/home



*/


export default  [
    // {
    //   path: '/',
    //   redirect:"/home"
    // },


    // !!! 当前路由配置, 放在数组的第一层,默认在一级视图中展示
    {
      path: '/',      // 将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /
      alias: "/home",
      name: 'home',   // 命名路由 (给路由名一个名字, 可以对应name跳转路由路径)
      //   component: HomeView, // 默认情况下, component对应组件会被渲染到 name="default"的一级视图中

      meta: { label: "首页", requiresAuth: false, isBack: false },
      components: {
        header: HeaderView,
        default: HomeView,
        footer: FooterView,
      }
    },
    {
      path: '/list',
      name: 'list',
      // component: ListView,
      meta: { label: "列表", requiresAuth: false },
      components: {
        header: HeaderView,
        default: ListView,
        footer: FooterView,
      }
    },
    // query传参
    {
      path: '/detail',
      name: 'detail',
      // component: DetailView,
      meta: { label: "详情", requiresAuth: true },
      components: {
        header: HeaderView,
        default: DetailView,
        // footer:FooterView,
      },
      // beforeEnter:function(to,from,next){
      //   console.log("路由独享守卫");
      //   console.log("to", to);
      //   console.log("from", from);
      //   next();
      // }
    },
    // params传参演示   => 动态路径参数
    {
      path: '/detail-copy/:gid',
      name: 'detail-copy',
      meta: { label: "详情", requiresAuth: true },
      component: DetailParamsView,
      props: true,
    },

    {
      path: '/car',
      name: 'car',
      // component: CarView,
      meta: { label: "购物", requiresAuth: true },
      components: {
        header: HeaderView,
        default: CarView,
        footer: FooterView,
      }
    },
    {
      path: '/mine',
      name: 'mine',
      meta: { label: "我的", requiresAuth: true },
      // component: MineView,
      components: {
        header: HeaderView,
        default: MineView,
        footer: FooterView,
      }
    },
    {
      path: '/login',
      name: 'login',
      meta: { label: "登录", requiresAuth: false },
      // component: LoginView,   // 一级视图中展示的组件
      components: {
        header: HeaderView,
        default: LoginView,
      },

      // 二级视图 (在login页中存在RouterView二级视图,对应二级路由进行页面展示)
      children: [{
        // 二级视图默认展示哪个组件
        // path:"",  // 如果没有设置二级路由配置, 默认展示 UserLoginView
        // name: 'login-default',
        // component: UserLoginView,   // 一级视图中展示的组件

        // 二级视图默认重定向
        path: "",  // 如果没有设置二级路由配置, 默认展示 UserLoginView
        // redirect:"/login/user",
        redirect: function (from) {
          return { path: "/login/user", query: { ...from.query } };
        },
      }, {
        path: "/login/user",    // path路由以 / 开始, 必须从根路由开始写
        name: "login-user",
        component: UserLoginView,
      }, {
        path: "phone",     // 没有以/开始  => 会自动和父级路由路径拼接  /login/phone
        name: "login-phone",
        component: PhoneLoginView
      }]
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/404',
      name: 'not-found',
      component: NotFoundView
    },

    // 捕获所有路由  => 展示NotFound视图(错误路径在地址栏还是课件)
    // {
    //   // path:"*",   // vue2 => vue3不支持
    //   path:"/:pathMatch(.*)*", // vue3采用动态路径参数 (在页面中可以通过this.$route.params.pathMatch获取匹配路径)
    //   name:"not-found",
    //   component:NotFoundView
    // }


    // 捕获所有路由  => 重定向到/404  (如果访问routes配置以外的所有路径,均会跳转404)

    //  重定向的本质 => 如果指定路由地址配置重定向, 其实就是在跳转指定路由时, 直接调用$router.push()  将路由地址改为另一个路径
    {
      // path:"*",   // vue2 => vue3不支持
      path: "/:pathMatch(.*)*", // vue3采用动态路径参数 (在页面中可以通过this.$route.params.pathMatch获取匹配路径)
      // redirect:"/404",
      // redirect:{path:"/404"},
      redirect: function (from) {
        console.log("from", from);   // 做重定向的路由信息
        return { path: "/404", query: { errorPath: from.fullPath } };
      }
    }
  ]